<!Document>
	<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="yes" name="apple-touch-fullscreen" />
		<meta content="telephone=no" name="format-detection" />
		<title>WebViewJavascriptBridge</title>
	</head>

	<body>
		<script>
			window.onerror = function (err) {
				log('window.onerror 出错: ' + err)
			}

			var getNativeInfoHasArgs = false
			var checkboxOnChange = () => {
				let ele = document.querySelector('#hasArgs')
				getNativeInfoHasArgs = ele.checked;
			}

			function setupWebViewJavascriptBridge(callback) {
				if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
				if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
				window.WVJBCallbacks = [callback];
				var WVJBIframe = document.createElement('iframe');
				WVJBIframe.style.display = 'none';
				WVJBIframe.src = 'https://__bridge_loaded__';
				document.documentElement.appendChild(WVJBIframe);
				setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
			}

			setupWebViewJavascriptBridge(function (bridge) {
				var uniqueId = 1
				function log(message, data) {
					var log = document.getElementById('log')
					var el = document.createElement('div')
					var dataStr = data ? JSON.stringify(data) : ""
					el.className = 'logLine'
					el.innerHTML = '【' + uniqueId++ + '】' + message + ':<br/>' + dataStr + '<br/>'
					if (log.children.length) { log.insertBefore(el, log.children[0]) }
					else { log.appendChild(el) }
				}

				bridge.registerHandler('getH5InfoOnStar', function (data, responseCallback) {
					log('初始化时，原生调用 getH5InfoOnStar 方法', data)
					var responseData = { 'H5InfoOnStar': 'H5 给的一些初始化信息' }
					log('JS 返回信息', responseData)
					responseCallback(responseData)
				})

				bridge.registerHandler('getH5Info', function (data, responseCallback) {
					log('原生调用 getH5Info 方法', data)
					var responseData = { 'H5Info': '运行时 H5 给的另一些信息', '参数': JSON.stringify(data) }
					log('JS 返回信息', responseData)
					responseCallback(responseData)
				})

				document.body.appendChild(document.createElement('br'))

				var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
				callbackButton.innerHTML = '原生注册方法，h5 从原生获取信息'
				callbackButton.onclick = function (e) {
					e.preventDefault()
					log('JS 调用方法 "getNativeInfo" 方法')
					if (getNativeInfoHasArgs) {
						bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
							log('JS 获取到数据', response)
						})
					}
					else {
						bridge.callHandler('getNativeInfo', function (response) {
							log('JS 获取到数据', response)
						})
					}
				}
			});
		</script>

		<h2>WebViewJavascriptBridge</h2>

		<div id='buttons'></div>
		<input type="checkbox" id="hasArgs" onchange="checkboxOnChange()" />
		<label for="hasArgs">调用 getNativeInfo 是否传递参数</label>
		<br/>

		<br/>
		<div class="scroll-view" style="overflow: auto;">
			<div id='log'></div>
		</div>

	</body>

	</html>